@import "../common/vars.scss";
@import "../mixins/mixins.scss";
@include create(switch) {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: $switch-font-size;
    line-height: $switch-height;
    height: $switch-height;
    vertical-align: middle;
    @include when(disabled) {
      & .aiui-switch-core,
      & .aiui-switch-label {
        cursor: not-allowed;
      }
    }

    @include e(label) {
        transition: .2s;
        height: $switch-height;
        display: inline-block;
        font-size: $switch-font-size;
        font-weight: 500;
        cursor: pointer;
        vertical-align: middle;
        color: $color-text-primary;
        @include m(left) {
          margin-right: 10px;
        }
        @include m(right) {
          margin-left: 10px;
        }
        & * {
          line-height: 1;
          font-size: $switch-font-size;
          display: inline-block;
        }
    }

    @include e(core) {
        margin: 0;
        display: inline-block;
        position: relative;
        width: $switch-width;
        height: $switch-height;
        border: 1px solid $switch-off-color;
        outline: none;
        border-radius: $switch-core-border-radius;
        box-sizing: border-box;
        background: $switch-off-color;
        cursor: pointer;
        transition: border-color .3s, background-color .3s;
        vertical-align: middle;

        &:after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: $border-radius-circle;
            transition: all .3s;
            width: $switch-button-size;
            height: $switch-button-size;
            background-color: $color-white;
        }
    }

    @include e(label-left){
        color: $color-primary;
    }

    @include when(checked) {
        .aiui-switch-core {
          border-color: $switch-on-color;
          background-color: $switch-on-color;
          &::after {
            left: 100%;
            margin-left: -$switch-button-size - 1px;
          }
        }
        .aiui-switch-label-right{
            color: $color-primary;
        }
        .aiui-switch-label-left{
            color: $color-text-primary;
        }
    }

    @include when(disabled) {
        opacity: 0.6;
    }
}